import '@ant-design/compatible/assets/index.css';
import { message, Row, Col, Button } from 'antd';
import React, { useState } from 'react';
import { useRequest } from '@umijs/hooks';
import styles from './style.less'
import router from 'umi/router';
import AuthComponent from '@/components/Authorized/AuthComponent';
import AddCommunicationRecord from './AddCommunicationRecord'
import { getCommunicateRecordRelevance, addCommunicateRecord, lostPrintRecordCommunication } from '../service'

const CommunicationRecord = props => {

  const { relevance } = props;

  // 新增沟通记录弹窗显隐
  const [addCommunicationRecordVisible, handleAddCommunicationRecordVisible] = useState(false)
  // 沟通记录详情
  const [communicationDetail, handleCommunicationDetail] = useState({})
  // 沟通记录弹窗标题
  const [communicationTitle, handleCommunicationTitle] = useState('')

  // 获取记录接口
  const { data: getCommunicateRecordRelevanceD = [], run: getCommunicateRecordRelevanceR } = useRequest(params => getCommunicateRecordRelevance({ relevance: relevance }))
  // 打印接口
  const { run: lostPrintRecordCommunicationR } = useRequest(params => lostPrintRecordCommunication(params), {
    manual: true,
    onSuccess: data => {
      sessionStorage.setItem(
        '/lostItemManage/reportPrint',
        JSON.stringify({ url: data, type: 'communicate' })
      )
      router.push('/banksearchSystem/lostItemManage/reportPrint')
    }
  })

  // 编辑沟通记录
  const updateCommunication = (item) => {
    handleCommunicationDetail(item)
    handleCommunicationTitle('编辑沟通记录')
    handleAddCommunicationRecordVisible(true)
  }

  // 新增/编辑沟通记录
  const handleCommunicationRecord = async fields => {
    try {
      await addCommunicateRecord({
        relevance: relevance,
        ...fields
      })
      return true
    } catch (error) {
      if (communicationTitle === '新增沟通记录') {
        message.error('新增失败请重试！');
      } else {
        message.error('编辑失败请重试！');
      }
      return false;
    }
  };


  // 打印
  const print = () => {
    lostPrintRecordCommunicationR(relevance)
  }

  return (
    <div className={styles.communicationRecord}>
      <Row>
        <Col span={24}>
          沟通记录
        </Col>
      </Row>
      <div className={styles.recordInfo}>
        <div className={styles.addOrPrint}>
          <p>沟通记录是为处理该遗失物品而与旅客进行通话内容的记录</p>
          <AuthComponent authCode='lostItemManage.lostItemInfoManage.basic'>
            <Button onClick={() => {
              handleCommunicationDetail({})
              handleCommunicationTitle('新增沟通记录')
              handleAddCommunicationRecordVisible(true)
            }}>新增</Button>
          </AuthComponent>
          <AuthComponent authCode='lostItemManage.lostItemInfoManage.basic'>
            <Button onClick={() => print()}>打印</Button>
          </AuthComponent>
        </div>
        <div className={styles.recordList}>
          {
            getCommunicateRecordRelevanceD.map(item => (
              <Row onClick={() => updateCommunication(item)}>
                <Col span={12}>
                  <p className={styles.communicationTitle}>日期</p>
                  <p className={styles.communicationInfo}>{item.updateTime ? item.updateTime : item.insetTime}</p>
                </Col>
                <Col span={12}>
                  <p className={styles.communicationTitle}>录入人</p>
                  <p className={styles.communicationInfo}>{item.inputPeople}</p>
                </Col>
                <Col span={12}>
                  <p className={styles.communicationTitle}>沟通人</p>
                  <p className={styles.communicationInfo}>{item.communicatePeople}</p>
                </Col>
                <Col span={20}>
                  <p className={styles.communicationTitle}>通话内容</p>
                  <p className={styles.communicationInfo}>{item.callContent}</p>
                </Col>
                <Col span={20}>
                  <p className={styles.communicationTitle}>备注</p>
                  <p className={styles.communicationInfo}>{item.remark}</p>
                </Col>
              </Row>
            ))
          }
        </div>
      </div>
      {
        addCommunicationRecordVisible && <AddCommunicationRecord
          onSubmit={async value => {
            const success = await handleCommunicationRecord(value);
            if (success) {
              handleAddCommunicationRecordVisible(false);
              if (communicationTitle === '新增沟通记录') {
                message.success('新增成功')
              } else {
                message.success('编辑成功')
              }
              getCommunicateRecordRelevanceR()
            }
          }}
          onCancel={() => handleAddCommunicationRecordVisible(false)}
          communicationDetail={communicationDetail}
          communicationTitle={communicationTitle}
          addCommunicationRecordVisible={addCommunicationRecordVisible}
        ></AddCommunicationRecord>
      }
    </div>
  )
}

export default CommunicationRecord;